

let form = layui.form;
let id = location.search.split('?id=')[1]







// ===================== 图片剪辑器 ==============
// 1. 获取裁剪区域的 DOM 元素
let $image = $(".container img");

// 2. 裁剪选项
let options = {
    aspectRatio: 400 / 280,
    preview: '.preview'
}

// 3. 初始化裁剪区域
$image.cropper(options)



// =============================  点击上传, 可以选择图片  =============================
$('#btnChooseCoverImage').click(function () {
    $('#fileCover').click();
});
$('#fileCover').change(function () {
    // 获取到用户选择的文件
    const file = this.files[0]
    console.log(file);
    if (!file) {
        return layer.msg('请选择文件')
    }
    const newSrc = URL.createObjectURL(file)
    console.log(newSrc);



    $image
        .cropper('destroy')      // 销毁旧的裁剪区域
        .attr('src', newSrc)  // 重新设置图片路径
        .cropper({
            // 纵横比
            aspectRatio: 400 / 280,
            // 指定预览区域
            preview: ".preview"
        })        // 重新初始化裁剪区域

});



// =============================  状态是以点击的按钮来确认的  =============================
let state
$('#btnPublish').click(function () {
    state = '发布'
})
$('#btnSave').click(function () {
    state = '存为草稿'
})



// ===================== 富文本编辑器 ==============
const E = window.wangEditor
const editor = new E("#contentBox")
// 或者 const editor = new E(document.getElementById('div1'))
editor.config.zIndex = 1
editor.create()

// =====================获取类别==============
axios.get("/my/article/cates")
    .then(({ data: { data } }) => {
        console.log(data)
        let newAll = data.map((item) => {
            return `
        <option value="${item.Id}">${item.name}</option>
       `
        }).join('')
        $('[name="cate_id"]').append(newAll)

        // 当option创建添加到下拉框之后，手动更新form表单全部内容
        form.render('select');


        // console.log(id)
        // /填充内容
        axios.get(`/my/article/${id}`)
            .then(({ data: { data } }) => {
                form.val("form", data);
                console.log(data)
                // 参数 filter 为表单域容器（class="layui-form"）的 lay - filter 属性值

                // 给富文本编辑器复制
                editor.txt.html(data.content)

                // 1.3 创建裁剪区域http://api-breakingnews-web.itheima.net
                let imgSrc = "http://api-breakingnews-web.itheima.net" + data.cover_img

                $image
                    .cropper('destroy')      // 销毁旧的裁剪区域
                    .attr('src', imgSrc)  // 重新设置图片路径
                    .cropper({
                        // 纵横比
                        aspectRatio: 400 / 280,
                        // 指定预览区域
                        preview: ".preview"
                    })        // 重新初始化裁剪区域
            })
    })


// =============================  点击提交数据  =============================
$('#form').on('submit', function (e) {
    e.preventDefault()
    let fd = new FormData(this)
    fd.forEach(value => console.log(value));

    //对于FormData!收集不到的数据，可以使用append方法进行追加
    //语法：fd.append(name,value);


    //收集富文本编辑器内容
    console.log(editor.txt.html());
    fd.append("content", editor.txt.html());


    // 追加状态
    fd.append("state", state);
    fd.append("Id", id);

    console.log('状态', state);

    // /不是必备的代码=>做个检测
    // fd.forEach((value, name) = console.log(value, name));




    $image
        .cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
            width: 400,
            height: 280
        })
        .toBlob(function (blob) {
            // 将 Canvas 画布上的内容，转化为文件对象
            // 得到blob文件对象后，进行后续的操作 ==> 通过 FormData来收集数据， ajax提交数据

            fd.append("cover_img", blob);




            axios.post("/my/article/edit", fd)
                .then(({ data: { status, message } }) => {
                    // console.log(res)
                    if (status !== 0) {
                        return layer.msg(message)
                    }
                    layer.msg(message, {

                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {
                        //do something
                        location.href = '/article/art_list.html'
                    });


                })


        })


})












